<template>
          <div>
              <header>
                     <i class="iconfont icon-weibiaoti-- fh" @click="back" ></i>
                     <span class="title">我的银行卡</span>
               </header>
               <h1 style="width:100%;height:1.88rem;"></h1>
               <div class="vacancy" v-if="state" >
                        <p class="iconfont icon-renzhengdunpaianquanbaozhangzhibao-xianxing">&nbsp;<span>卡帮帮保障您的信息安全</span></p>
                        <img :src="bg" alt="">
                        <h4>您还没有绑定银行卡</h4>
                        <div class="btn" style="widgth:100%;position:relative" >
                              <router-link tag="button" :to="{name:'bindbank'}">绑定银行卡</router-link>
                        </div>
               </div>
                <!-- <div class="main" v-if="bankdata.length>0" >  -->
                          <div class="mui-content main" style="width:90%;position: relative;left:0;right:0;margin:0 auto;">  
                            <ul id="OA_task_1" class="mui-table-view" style="position:static" >  
                              <li class="mui-table-view-cell" style="padding:0;">  
                                <div class="mui-slider-right mui-disabled">  
                                   <a class="mui-btn mui-btn-red">解除绑定</a>  
                                </div>  
                                <div class="mui-slider-handle">  
                                   <router-link class="bank" tag="div" :to="{name:'all'}">
                                                <span class="name">{{bankname}}</span>
                                                <span class="zh">左滑解除绑定银行卡</span>
                                                <div class="number">
                                                <span class="xh">***&nbsp;&nbsp;****&nbsp;&nbsp;****</span>
                                                <span class="ws">{{cardid}}</span>
                                                </div>
                                                <div class="bottom">
                                                <span class="time">还款日 | 10日</span>                                                
                                                <span class="ck">查看</span>
                                                </div>
                                  </router-link>
                           </div>  
                          </li>  
                        </ul>  
                       </div>
                    </div>
               <!-- </div> -->
</template>

<script>
import bg from '@/assets/img/10_card.png'
import $ from 'jquery'



export default {
        data(){
            return{
                bg,
                bankname:"",
                cardid:"",
                state:true,
            }
        },
        methods:{
            back(){
                this.$router.go(-1)
            },
            ckdd(){
                this.$router.push({name:'all'})
                // console.log("123")
            }
        },
        mounted(){
           var bankdata = JSON.parse(localStorage.getItem("bankdata"))
              console.log(bankdata)
                if(bankdata!== null){
                     this.state = false
                     $(".main").css("display","block")
                    //  console.log("222")
                     for(let i=0;i<bankdata.length;i++){
                        this.bankname = bankdata[2]
                        this.cardid = bankdata[3]
                     }
                }
                if(bankdata == null){
                    this.state = true
                    // console.log("123")
                    $(".main").css("display","none")
                }
             mui.init();  
                (function($) {
                $('#OA_task_1').on('tap', '.mui-btn', function(event) {  
                    // console.log("213")
                    var elem = this;  
                    var li = elem.parentNode.parentNode;  
                    mui.confirm('确定解除此银行卡绑定？', function(e) {  
                        if (e.index == 0) {  
                            li.parentNode.removeChild(li);
                            localStorage.removeItem('bankdata')
                            location.reload();  
                        } else {  
                            setTimeout(function() {  
                                $.swipeoutClose(li);  
                            }, 0);  
                        }  
                    });  
                });  
                var btnArray = ['确认', '取消'];   
            })(mui);
           
        }
        
}
</script>

<style lang="less" scoped>
       /**{ touch-action: none; }*/
       header{
               position:fixed;
               top:0;
               width:100%;
               height:1.88rem;
               display:flex;
               position:fixed;
               top:0;
               z-index:100;
               background: #fff;
         }
         .fh{
             width:2.1rem;
             line-height:1.88rem;
             text-align:center;
             z-index:100; 
             color:#333333;
             font-size:0.76rem;  
         }
         .title{
               font-size:0.76rem;
               line-height:1.88rem;
               text-align:center;
               color:#333333;
               letter-spacing:0.02rem;
               position: absolute;
               left:0;
               right:0;
               margin:0 auto;
         }
         .vacancy{
             p{
                 text-align:center;
                 padding-top:0.87rem;
                 color:#757576;
                 margin-bottom:25%;
                  span{
                      font-size:0.48rem;
                      color:#a9a9a9;
                      letter-spacing:0.04rem;
                  }
             }
             img{
                 width:50%;
                 height:50%;
                 position: relative;
                 left:0;
                 right:0;
                 margin:0 auto;
                 margin-bottom:15%;
             }
             h4{
                 letter-spacing:0.02rem;
                 color:#999999;
                 text-align:center;
                 margin-bottom:15%;
                 }
             button{
                 width:90%;
                 height:1.66rem;
                 border-radius:0.15rem;
                 position: absolute;;
                 left:0;
                 right:0;
                 margin:0 auto;
                 letter-spacing:0.02rem;
                 font-size:0.58rem;
                 color:#fff;
                 border:none;
                 background: #0dafe6; /* Old browsers */
                background: -moz-linear-gradient(left, #0dafe6 0%, #1c89fe 100%); /* FF3.6-15 */
                background: -webkit-linear-gradient(left, #0dafe6 0%,#1c89fe 100%); /* Chrome10-25,Safari5.1-6 */
                background: linear-gradient(to right, #0dafe6 0%,#1c89fe 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0dafe6', endColorstr='#1c89fe',GradientType=1 ); /* IE6-9 */
             }     
         }
       .bank{
           display: flex;
           height:120px;
           border-radius:4px;
           position: relative;
           background:orange;
          
        }
        .zh{
        	position:absolute;
        	top:10%;
        	right:5%;
        	color:orangered;
        	font-size:12px;
        }
        .shz{
            width:67px;
            height:24px;
            background:#459ceb;
            color:#e9eaeb;
            font-size:12px;
            position: absolute;
            right:0;
            top:0;
            line-height:24px;
            text-align:center;
            border-top-right-radius:4px;
            border-bottom-left-radius:4px;        
        }
        .name{
            letter-spacing:2px;
            color:#fff;
            font-size:16px;
            font-weight:550;
            position: absolute;
            top:15px;
            left:21px;
        }
        .number{
            display:flex;
            position: absolute;
            top:44px;
            color:#fff;
            position: relative;
        }
        .xh{
            position: absolute;
            top:3px;
            left:21px;
            letter-spacing:2px;
        }
        .ws{
            position: absolute;
            left:155px;
            font-size:16px;
        }
        .bottom{
            background:black;
            background:rgba(0,0,0,.3);
            display:flex;
            position: relative;
            justify-content:space-between;  
            width:100%;
            height:40px;
            border-radius:4px;
            position: absolute;
            bottom:0;
            padding-left:21px;
        }
        .time{
            line-height:40px;
            color:#fff;
            font-size:12px;
            letter-spacing:1px;
        }
        .ck{
            font-size:12px;
            color:#fff;
            width:61px;
            height:23px;
            border: 1px solid #fff;
            text-align: center;
            line-height:20px;
            border-radius:2px;
            position: absolute;
            top:8px;
            right:12px;
            letter-spacing:1px;
        }
        .sc{
            font-size:12px;
            color:#fff;
            width:61px;
            height:23px;
            border: 1px solid #fff;
            text-align: center;
            line-height:20px;
            border-radius:2px;
            position: absolute;
            top:8px;
            right:12px;
            letter-spacing:1px;
        
        }

         .djtj{
            width:97%;
            height:75px;
            border-radius:4px;
            border:1px solid #305fb5;
            margin-bottom:20px;
            padding-left:61px;
        }
        .add{
            font-size:14px;
            color:#305fb5;
            line-height:70px;
            font-weight:600;
            letter-spacing:1px;
        }
</style>
<style>
       .mui-table-view:after{
           height:0;
       }
       .mui-table-view:before{
           height:0;
       }
</style>

